<!--
 * @Author: qwlbwm 18370818801qwl./
 * @Date: 2023-09-14 09:09:09
 * @LastEditors: whereamazinghappen 306702547@qq.com
 * @LastEditTime: 2023-10-24 19:01:08
 * @FilePath: \checc-business-module-web-kgpt-dev\src\views\examineManage\boardVIew\zjContribution\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dashboard-container digit-container">
    <div class="head-title">
      <!-- <div class="title-content">数字化考核看板</div> -->
      <div>
        <el-date-picker
          v-model="searchFrom.age"
          type="year"
          value-format="YYYY"
          placeholder="选择年份"
          :clearable="false"
          @change="ageChange"
        />
      </div>
    </div>
    <div
      class="charts"
      style="height: calc(100% - 55px); display: flex; justify-content: center; align-items: center"
    >
      <div ref="zjExeharts" style="width: 85%; height: 80%"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import * as api from '@/views/examineManage/api/boardView'
import * as echarts from 'echarts'
import { windowResize } from '@/views/common'
import { fontSizeRem } from '@/utils/utils'
const zjExeharts = ref()
const searchFrom = reactive({
  //查询
  age: '',
})
let myEharts
// const refreshPage:any=inject('refreshPage', Function, true);
// let annualId=route.query.id;
const onResizeHandler = () => {
  windowResize(100, () => {
    myEharts.resize()
  })
}

onMounted(() => {
  doHandleYear()
  gettargetlist()
  window.addEventListener('resize', onResizeHandler, false)
})

onUnmounted(() => {
  window.removeEventListener('resize', onResizeHandler, false)
})

let state = reactive<any>({
  table_list: [],
})
const initEcharts = () => {
  let xdata: Array<string> = []
  let ydata: Array<string> = []
  let ydata2: Array<string> = []
  for (let i = 0; i < state.table_list.length; i++) {
    xdata.push(state.table_list[i].companyName)
    ydata.push(state.table_list[i].repeatSumScore)
    ydata2.push(state.table_list[i].addTotalPoint)
  }
  myEharts = echarts.init(zjExeharts.value)
  myEharts.setOption({
    title: {
      text: `${searchFrom.age}年中咨数字化考核成绩`,
      left: 'center',
      padding: 20,
      textStyle: {
        fontSize: 20,
        color: '#FFF',
      },
    },
    grid: {
      left: '6%',
      right: '6%',
      bottom: '30',
      containLabel: true,
    },
    legend: {
      itemWidth: 14,
      data: ['总分', '计分项得分'],
      bottom: '0',
      textStyle: {
        fontSize: 12,
        color: '#FFF',
      },
    },
    xAxis: {
      type: 'category',
      data: xdata,
      name:'年份',
      axisLine: {
        show: true,
        lineStyle: { color: '#283460' }
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'rgba(131,101,101,0.2)',
          type: 'dashed',
        },
      },
      axisLine: {
        show: true,
        lineStyle: { color: '#283460' }
      },
      name:'得分',
    },
    color:['#5470C6','#9C356F'],
    series: [
      {
        name: '总分',
        data: ydata,
        type: 'bar',
        barMaxWidth: 50,
        label: {
          show: true,
          position:'top',
        },
        itemStyle: {
          // color: '#C7A746',
          color: function (params) {
            //展示正值的柱子，负数设为透明
            let colorArr = params.value > 0 ? ['#5470C6', '#08103B'] : ['#08103B', '#5470C6']
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: colorArr[0], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: colorArr[1], // 100% 处的颜色
                },
              ],
              false
            )
          },
          barBorderRadius: [30, 30, 0, 0],
        },
        barWidth: fontSizeRem(0.3),
      },
      {
        name: '计分项得分',
        type: 'bar',
        emphasis: {
          focus: 'series',
        },
        data: ydata2,
        barMaxWidth: 50,
        label: {
          show: true,
          position:'top',
        },
        itemStyle: {
          // color: '#C7A746',
          color: function (params) {
            //展示正值的柱子，负数设为透明
            let colorArr = params.value > 0 ? ['#9C356F', '#08103B'] : ['#08103B', '#9C356F']
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: colorArr[0], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: colorArr[1], // 100% 处的颜色
                },
              ],
              false
            )
          },
          barBorderRadius: [30, 30, 0, 0],
        },
        barWidth: fontSizeRem(0.3),
      },
    ],
  })
}
const ageChange = () => {
  gettargetlist()
}
const doHandleYear = () => {
  var myDate = new Date()
  searchFrom.age = myDate.getFullYear() + ''
}

const gettargetlist = () => {
  //获取table列表
  api.digitalBoardRequest(searchFrom).then((res) => {
    state.table_list = res.data.data
    initEcharts()
  })
}
</script>
<style lang="scss" scoped>
.digit-container {
  height: 100vh;
  background-color: #0b1545;
  padding: 2vh;
  box-sizing: border-box;
  .head-title {
    // margin: 2vh 0 0 2vh;
    margin-bottom: 2vh;
  }
  .charts {
    // margin: 2vh;
    background-color: #0b1545;
    background-image: url(../images/digit-bg.png);
    background-size: 100% 100%;
  }
  :deep(.el-input--small .el-input__inner) {
    border: none;
    color: aliceblue;
    background-color: #192e6e !important;
  }
}
.container {
  // background-color: rgba(43, 73, 137, 1);
  padding: 10px;
  overflow-y: auto;
  height: 100%;
  .head-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    .title-content {
      color: #ffffff;
      font-size: 16px;
      font-weight: 650;
    }
  }
  .index-title {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e7e5e5;
    margin-bottom: 10px;
    font-size: 26px;
  }
  .header-qwl {
    display: flex;
    justify-content: center;
    .custom-tabs-label {
      font-size: 24px;
      padding: 0 10px;
    }
  }
}
:deep(.el-dialog__body) {
  padding: 0;
}
:deep(.el-dialog__header) {
  border-bottom: 1px solid #f1eded;
}
</style>
